<template>
    <div id="myCharLine" :style="{width: '100%', height: '155px'}"></div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "lines",
        props: {
            listData:Object
        },
        data(){
            return{
                option:{},
                dateList:this.listData.date,
                countList:this.listData.count,
                errorList:this.listData.error
            }
        },
        mounted() {
            console.log(this.listData)
            this.inIt();
        },
        watch:{
            listData: {
                deep: true,
                handler() {
                    this.option=this.listData
                    this.inIt();
                },
            },
        },
        methods:{
            inIt(){
                let myChart = echarts.init(document.getElementById('myCharLine'));
                let that = this;
                this.option = {
                    grid:{
                        right:80,
                        top:30,
                        bottom: 20,
                        left:50
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 0,
                        bottom:70,
                        data:['正常','异常'],
                        textStyle:{
                            color:'#bebebe'
                        },
                        icon: "rect"
                    },
                    axisLabel: {
                        color: "#2b6c70"
                    },
                    xAxis: {
                        name:'(时间)',
                        nameTextStyle:{
                            fontSize:12,
                            color:'#2d6c71',
                            padding:[0,0,-25,-5]
                        },
                        axisTick:{
                            show:false
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: this.dateList,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#223e41'
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                width:2,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#2d6c71' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#2d6c71' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                            }
                        }
                    },
                    yAxis: {
                        name:'(次数)',
                        splitNumber:5,
                        nameTextStyle:{
                            fontSize:12,
                            color:'#2d6c71',
                            padding:[0,0,0,-45]
                        },
                        axisTick:{
                            show:false
                        },
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#223e41'
                            }
                        },
                        axisLine:{
                            show: true,
                            lineStyle:{
                                width:1,
                                color: '#2d6c71',
                            }
                        }
                    },
                    series: [{
                        name: '正常',
                        type: 'line',
                        smooth: true,
                        data: this.countList,
                        color: {
                            type: 'linear',
                            colorStops: [{
                                offset: 0, color: '#0dd3b0' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#0dd3b0' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        areaStyle:{
                            color:'rgba(5, 210, 173, 0.5)'
                        }
                    },
                        {
                            name: '异常',
                            type: 'line',
                            smooth: true,
                            data: this.errorList,
                            color: {
                                type: 'linear',
                                colorStops: [{
                                    offset: 0, color: '#da6957' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#da6957' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            areaStyle:{
                                color:'rgba(220, 31, 3, 0.5)'
                            }
                        }]
                };
                // 绘制图表
                myChart.setOption(this.option);
                setTimeout(function () {
                    window.onresize = function () {
                        myChart.resize();
                    }
                }, 200)
            }
        }
    }
</script>

<style scoped>

</style>
